<template>
  <div>
    <van-nav-bar>
      <template #right>
        <div>更多&emsp;></div>
      </template>
      <template #left>
        <div>限时购</div>
      </template>
      <template #title>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
            <span class="size">后 结束</span>
          </template>
        </van-count-down>
      </template>
    </van-nav-bar>
    <div class="box">
      <div class="box1" v-for="(v, index) in arr" :key="index">
        <img :src="v" alt="" />
        <div class="text">{{ text[index] }}</div>
        <div class="money">￥{{ money[index] }}</div>
        <div class="originalprice">￥{{ originalprice[index] }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);

import { CountDown } from "vant";
Vue.use(CountDown);

export default {
  data() {
    return {
      time: 60 * 60 * 60 * 1000,
      arr: [],
      text: [],
      money: [],
      originalprice: [],
    };
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/Timelimit ",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        this.arr = element.data.timeimg;
        this.text = element.data.timetext;
        this.money = element.data.hotmoney;
        this.originalprice = element.data.befor;
      });
    });
  },
};
</script>

<style scoped>
.colon {
  display: inline-block;
  margin: 0;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #ee0a24;
  font-size: 16px;
  text-align: center;
  font-weight: 700;
}
/deep/.van-nav-bar__left {
  font-weight: 600;
  font-size: 20px;
}
/deep/.van-count-down {
  margin-right: 80px;
}
.size {
  font-size: 12px;
  color: darkcyan;
}
.box {
  height: 180px;
  display: flex;
  overflow: auto;
}
.box .box1 {
  width: 100px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-shrink: 1;
  margin-right: 10px;
}
.box .box1 img {
  width: 90px;
  height: 90px;
  margin-top: 10px;
}
.box .box1 .text {
  height: 22px;
  width: 80px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.box .box1 .money {
  height: 20px;
  width: 80px;
  color: red;
  font-weight: 600;
  font-size: 18px;
}
.box .box1 .originalprice {
  text-decoration:line-through
}
</style>